<template lang="html">
  <div class="">
      <div class="header">
          <!-- <el-form class="filterCondition demo-form-inline" ref="form"  :inline="true" label-width="80px">
              <el-input placeholder="输入市代名称" v-model="keyword" style="width: 420px;">
                <el-button slot="append" style="width: 120px;" @click="search()">搜索</el-button>
              </el-input>
          </el-form> -->
      </div>
      <div class="body">
        <el-table :data="tableData.list" style="width: 100%">
            <el-table-column label="市代名称" prop="company" align="center" width=""></el-table-column>
            <el-table-column label="联系方式" prop="phone" align="center" width=""></el-table-column>
            <el-table-column label="负责人" prop="leader" align="center" width=""></el-table-column>
            <el-table-column label="地区" prop="city" align="center" width=""></el-table-column>
            <el-table-column label="系统使用费" prop="price" align="center" width=""></el-table-column>
            <el-table-column label="支付凭证" align="center" width="">
                <template slot-scope="scope">
                    <img :preview="scope.row.voucher" :src="scope.row.voucher" class="preview-img"  />
                </template>
            </el-table-column>
            <el-table-column label="申请时间" prop="create_time" align="center" width=""></el-table-column>
            <el-table-column label="操作" align="center" width="">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="doPass(scope.row)">通过</el-button>
                <el-button type="text" size="small" @click="doReject(scope.row)">驳回</el-button>
              </template>
            </el-table-column>
        </el-table>
      </div>

      <div class="page_box">
          <el-pagination class="page" layout="prev, pager, next"
            @current-change="search" :page-count='tableData.rows' >
          </el-pagination>
      </div>

      <div class="dialog">
        <el-dialog :visible.sync="dialogVisible" width="20%">
            <el-form :model="formLabelAlign" label-width="90px">
                <el-form-item label="延迟罚款">
                  <el-input v-model="formLabelAlign.find"></el-input>
                </el-form-item>
                <el-form-item label="市代分佣">
                  <el-input v-model="formLabelAlign.card_per"></el-input>
                </el-form-item>
                <el-form-item label="油品供应商">
                  <el-input disabled v-model="formLabelAlign.sm"></el-input>
                </el-form-item>
                <!-- <el-form-item label="推荐人身份">
                  <el-input disabled v-model="formLabelAlign.share_type"></el-input>
                </el-form-item>
                <el-form-item label="推荐人名称">
                  <el-input disabled v-model="formLabelAlign.share_name"></el-input>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
      </div>

  </div>

</template>

<script>
export default {
  data (){
    return {
      tableData:[],
      dialogVisible: false,
      formLabelAlign:{},
      currentRow: [],
      // keyword:''
    }
  },
  created(){
    this.search()
  },
  methods: {
    search(page=1){
      this.tableData = []
      this.$http3.auditSupplyList({page}).
      then(res=>{
        this.tableData =
        res.data.code == 1?
        res.data.data: []
        this.$previewRefresh()
      })
    },
    doPass(e){
      this.formLabelAlign = {};
      this.currentRow = e;
      Promise.all([
        this.$http3.getInfo(),
        this.$http3.supplyAdminAuditSupplygetDetail({
          gid: e.gid
        })
      ]).then(res=>{
        this.formLabelAlign = Object.assign(this.formLabelAlign,res[0].data.data);
        this.formLabelAlign = Object.assign(this.formLabelAlign,res[1].data.data);
        this.formLabelAlign.sm = this.formLabelAlign.sm || "无"
        this.dialogVisible = true;
      })

    },
    doReject(e){
      this.$prompt('请输入驳回理由', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$http3.incAreaReject({
            id: e.id,
            gid: e.gid,
            reason: value,
          }).then(res=>{
            res.data.code == 1?
            this.$message.success(res.data.msg):
            this.$message.error(res.data.msg);
            this.search()
          })
        }).catch( () => 0);
    },
    confirm(){
      this.$http3.incAreaHandle({
        gid: this.currentRow.gid,
        find: this.formLabelAlign.find,
        card_per: this.formLabelAlign.card_per,
        id: this.currentRow.id,
      }).then(res=>{
        res.data.code == 1?
        this.$message.success(res.data.msg):
        this.$message.error(res.data.msg);
        this.formLabelAlign = {}
        this.currentRow = {}
        this.dialogVisible = false
        this.search()
      })
    },
  }

}
</script>

<style lang="css" scoped>
/deep/ .el-input-group__append, .el-input-group__prepend{
  background-color: #3498E9;
  border: none;
  color: white;
}

.preview-img{
  display: block;
  width: 100%;
  height: 30px;
}
.header{
  margin-bottom: 10px
}
.page_box{
  text-align: center;
}
</style>
